<template>
  <div class="app-container">
    <el-row type="flex" justify="end">
      <el-form inline>
        <el-form-item label="项目名称">
          <el-input
            v-model="projectName"
            clearable
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="任务类别">
          <el-select v-model="taskType">
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in taskTypeArr"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目分类">
          <el-select v-model="projectType">
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in projectTypeArr"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="项目名称" prop="projectName" />
      <el-table-column label="任务类别" align="center" width="130">
        <template slot-scope="{ row }">
          {{ renderTaskType(row.personCategory) }}
        </template>
      </el-table-column>
      <el-table-column label="项目分类" align="center" width="130">
        <template slot-scope="{ row }">
          {{ renderProjectType(row.projectCategory) }}
        </template>
      </el-table-column>
      <el-table-column
        label="立项号"
        align="center"
        prop="projectApproveNumber"
      />
      <el-table-column label="里程碑" align="center" prop="periodName" />
      <el-table-column label="项目状态" align="center" width="120">
        <template slot-scope="{ row }">
          <el-link :type="projectStatusArr[row.projectStatus].type">
            {{projectStatusArr[row.projectStatus].text}}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateTime"
        width="200"
      />
      <el-table-column label="操作" align="left" width="240">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" plain @click="goDetail(row)">
            过程管理
          </el-button>
          <el-button
            size="mini"
            type="warning"
            plain
            @click="stopProcess(row, 0)"
            v-if="loginUser.name == '科研管理员' && row.projectStatus != 'STOP' && row.projectStatus != 'HAND_ON'"
          >
            暂停
          </el-button>
          <el-button
            size="mini"
            type="danger"
            plain
            @click="stopProcess(row, 1)"
            v-if="loginUser.name == '科研管理员' && row.projectStatus != 'STOP' && row.projectStatus != 'HAND_ON'"
          >
            终止
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px" />
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />
  </div>
</template>

<script>
import { apiTypeList } from "@/api2/projectManagement/reporting";
import { getAllProject,
  apiStopProject, // 暂停终止项目
   } from "@/api2/projectManagement/process";

export default {
  data() {
    return {
      loginUser: JSON.parse(sessionStorage.getItem("loginUserinfo")),
      projectStatusArr: {
          PROCEED : { type:'primary', text:'进行中' },
          NOT_START : { type:'info', text:'未开始' },
          FINISHED : { type:'success', text:'已结束' },
          OVERTIME : { type:'warning', text:'超时' },
          HAND_ON : { type:'danger', text:'暂停' },
          STOP : { type:'danger', text:'终止' },
        },

      taskTypeArr: [
        { type: 1, name: "我负责的" },
        { type: 2, name: "我参与的" },
        { type: 3, name: "我审核的" },
      ],
      projectTypeArr: [],
      projectName: "",
      taskType: 0,
      projectType: 0,
      listLoading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  mounted() {
    this.getClassifyOption();
    this.getList();
  },
  methods: {
        // 暂停、终止项目
    stopProcess(row, index) {
      let text = index == 0 ? "暂停" : "终止";

      this.$confirm(`此操作将${text}该项目, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {
          projectId: row.projectId,
        };
        if (index == 0) {
          data.projectStatus = "HAND_ON";
        } else {
          data.projectStatus = "STOP";
        }
        apiStopProject(data).then((res) => {
          if(res.code == 0) {
            this.msgSuccess(`${text}成功`);
            this.getList();
          } else {
            this.msgError(`${text}失败`);
            this.getList();
          }
        }).catch((err) => {
          console.log(err);
          this.msgError(`${text}失败`);
          this.getList();
        });
      });
    },
    async getClassifyOption() {
      const res = await apiTypeList();
      this.projectTypeArr = res.data;
    },
    renderTaskType(val) {
      const obj = this.taskTypeArr.find((item) => {
        return val == item.type;
      });
      return obj.name;
    },
    renderProjectType(val) {
      const obj = this.projectTypeArr.find((item) => {
        return val == item.key;
      });
      return obj.value;
    },
    getList() {
      this.listLoading = true;
      getAllProject({
        projectName: this.projectName,
        personCategory: this.taskType,
        projectCategory: this.projectType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((data) => {
        this.listLoading = false;
        this.tableData = data.data;
        this.total = data.total;
      });
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    onPageSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    onCurrentPageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    goDetail({ projectName: name, projectId: id }) {
      this.$emit("change", {
        componentName: "projectDetail",
        projectInfo: {
          name,
          id,
        },
      });
    },
  },
};
</script>
